<template>
    <div class="line"></div>
    <div class="layout">
        <indexChartVue :CardData="indexChartData" />
    </div>
    <div class="layout">
        <a-row :gutter="[8, 8]">
            <a-col :span="6" v-for="item in HomeCardData">
                <ItemCard @DownLoadFiles="DownLoad" @PreviewOtherUser="PreviewOtherUser" @show-preview="ShowCodeModel"
                    :CardData="item" />
            </a-col>
        </a-row>
    </div>
    <CodeModel v-model:show="CodeModelShow" @RefreshPage="Refresh" @DownLoad="DownLoad" v-if="CodeModelShow"
        :Status="LookAtStatus" :EditStatus="EditStatus" />
    <OtherUserCodeModal v-model:show="OtherUserStatus" :Status="OtherUserData" v-if="OtherUserStatus" />
</template>
<script lang="ts" setup>
import CodeModel from './_CodeModal/index.vue'
import { nextTick, onMounted, ref } from 'vue';
import ItemCard from './ItemCard.vue'
import indexChartVue from '../1_home/indexChart.vue';
import Home from '@/apis/home'
import DownloadFiles from '@/_libs/DownloadFiles';
import OtherUserCodeModal from './OtherUserCodeModal.vue'

const CodeModelShow = ref<boolean>(false);
interface HomeCardData {
    Id: string;
    Status: number;
    title: string;
    description: string;
    totalPoints: number;
    ChartData: number[];
    updateTime: 0,
}
const HomeCardData = ref<HomeCardData[]>([]);
const indexChartData = ref<{ title: string, totalPoints: number, updateTime: number }[]>([]);
interface DistMapping {
    [key: string]: any;
}
const EditStatus = ref<boolean>(false);
let TopicListMapping: DistMapping = {};
let InspectMapping: DistMapping = {};
const LookAtStatus = ref<TopicStatus>({
    id: '',
    codeContent: '',
    description: '',
    imagePath: '',
    title: '',
    updateTime: 0,
});
const GetPageData = async () => {
    HomeCardData.value = [];
    indexChartData.value = [];
    TopicListMapping = {};
    InspectMapping = {};

    let TopicList = await Home.TopicList();
    for (let i = 0; i < TopicList.length; i++) {
        const element = TopicList[i];
        TopicListMapping[element.id] = element;
    }
    let InspectChart = await Home.InspectList();
    for (let i = 0; i < InspectChart.length; i++) {
        const element = InspectChart[i];
        InspectMapping[element.id] = element;
        if (TopicListMapping[element.topicId]) {
            TopicListMapping[element.topicId].Inspect = element;
        }
    };

    for (const key in TopicListMapping) {
        const element = TopicListMapping[key];
        let Status = 0;
        if (element.Inspect) {
            Status += 1;
        };
        if (element.Inspect && element.Inspect.draft == 1) {
            Status += 1;
        };
        if (element.Inspect && element.Inspect.totalPoints && element.Inspect.draft == 1) {
            Status += 1;
        };
        var ChartData: number[] = [];
        var totalPoints = null;
        if (element.Inspect && element.Inspect.totalPoints) {
            ChartData = [element.Inspect.inspectA, element.Inspect.inspectB, element.Inspect.inspectC, element.Inspect.inspectD, element.Inspect.inspectE];
            totalPoints = element.Inspect.totalPoints
        }

        HomeCardData.value.push({
            Id: element.id,
            Status: Status,
            title: element.title,
            description: element.description,
            totalPoints: totalPoints,
            ChartData: ChartData,
            updateTime: element.updateTime,
        });

        indexChartData.value.push({
            title: element.title,
            totalPoints: totalPoints,
            updateTime: element.updateTime,
        })

    }
    HomeCardData.value = HomeCardData.value.reverse();
}
onMounted(() => {
    GetPageData();
});
const Refresh = (Status: boolean) => {
    GetPageData();
    if (Status) {
        CodeModelShow.value = false;
    }
}
const DownLoad = (id: string): void => {
    const data = TopicListMapping[id];
    DownloadFiles(data.codeContent, data.title);
}
const ShowCodeModel = (id: string): void => {
    const data = TopicListMapping[id];
    let Code = data.codeContent;
    if (data.Inspect && data.Inspect.codeContent) {
        Code = data.Inspect.codeContent;
    };
    if (data.Inspect && data.Inspect.draft) {
        EditStatus.value = true;
    } else {
        EditStatus.value = false;
    }

    LookAtStatus.value = {
        id: id,
        codeContent: Code,
        description: data.description,
        imagePath: data.imagePath,
        title: data.title,
        updateTime: 0
    };
    nextTick(() => {
        CodeModelShow.value = true;
    })
};


const OtherUserStatus = ref<boolean>(false);
const OtherUserData = ref<TopicStatus>({
    id: '',
    codeContent: '',
    description: '',
    imagePath: '',
    title: '',
    updateTime: 0,
});

const PreviewOtherUser = (data: any) => {
    const Topic = TopicListMapping[data.topicId];
    OtherUserData.value = {
        id: data.id,
        codeContent: data.Code,
        description: data.description,
        imagePath: Topic.imagePath,
        title: Topic.title + ' (' + data.nickname + ') ',
        updateTime: data.updateTime,
    };
    console.log(OtherUserData.value);

    nextTick(() => {
        OtherUserStatus.value = true;
    })
}


</script>
<style lang="less" scoped>
.line {
    height: 1px;
}

.layout {
    width: 1200px;
    margin: 0 auto;
}

.Charts {
    height: 300px;
    margin: 20px auto;
}
</style>